<template>
	<div class="container flex-box">
		<div class="left">
			<div class="switch flex-box">
				是否开启业绩推送
				<el-switch
					v-model="setInfo.isOpen"
					active-color="#FF4400"
					@change="save"
				></el-switch>
			</div>
			<p class="tip">开启后，公众号将向您推送：1.每日业绩报告；2.您设置 的定点业绩查询消息</p>
			<p class="day">
				当前推送频率：每天<span> {{ setInfo.checkList.length }} </span>次
			</p>
			<div class="set">
				<p class="title">推送时间设置</p>
				<el-checkbox-group v-model="setInfo.checkList">
					<el-checkbox v-for="(item, index) in 24" :key="index" :label="item"
						>{{ item }}点</el-checkbox
					>
				</el-checkbox-group>
			</div>
			<div v-if="setInfo.isOpen" class="current">
				当前已设置模板： {{ btnGroup[template] ? btnGroup[template] : '未设置' }}
			</div>
		</div>
		<div class="right">
			<p class="title">推送模版消息设置</p>
			<div class="group">
				<div
					class="tem-btn"
					:class="[setInfo.current === index ? 'tem-btn-c' : '']"
					v-for="(item, index) in this.btnGroup"
					:key="index"
					@click="setInfo.current = index"
				>
					{{ item }}
				</div>
			</div>
			<p class="title-res">业绩结果：</p>
			<div class="tem">
				<template v-if="setInfo.current === 0">
					<p>今日此时段佣金：{今日有效佣金}</p>
					<p>昨日此时段佣金：{昨日有效佣金}</p>
					<p>同一时间段佣金比：{同一时段佣金比}</p>
					<p>- - - - - - - - - - - - - - - - - - - - - - - - - - - -</p>
					<p>今日有效订单：{今日有效订单}</p>
					<p>昨日此时段订单：{昨日有效订单}</p>
					<p>同一时段订单量：{有效订单较昨日增长}</p>
				</template>

				<template v-if="setInfo.current === 1">
					<p>今日有效佣金：{今日有效佣金}</p>
					<p>较昨日增长数：{有效佣金较昨日增长}</p>
					<p>今日有效订单：{今日有效订单}</p>
					<p>较昨日增长数：{有效订单较昨日增长}</p>
				</template>

				<template v-if="setInfo.current === 2">
					<p>今日佣金：{今日有效佣金} ({今日有效订单}单)</p>
					<p>昨日佣金：{昨日有效佣金} ({昨日有效订单}单)</p>
					<p>同比增长：{有效佣金较昨日增长} ({有效订单较昨日增长}单)</p>
				</template>
			</div>
			<div class="operation flex-center">
				<div class="save" @click="save">保存</div>
				<div class="pre" @click="showDia = true">预览模板效果</div>
			</div>
			<!-- 预览 -->
			<el-dialog
				:visible.sync="showDia"
				width="350px"
				title="自定义模板预览"
				custom-class="preDia"
			>
				<div class="content">
					<div class="box">
						<p class="pre-title">业绩查询结果</p>
						<p class="pre-tip">以下是您的订单佣金概况</p>
						<p class="date"><span>统计日期：</span>2020-02-02 00:00-11:00</p>
						<div class="res flex-box">
							<p>业绩结果：</p>
							<template v-if="setInfo.current === 0">
								<div>
									<p>今日此时段佣金：¥0</p>
									<p>昨日此时段佣金：¥0</p>
									<p>同一时间段佣金比：+0%</p>
									<p>- - - - - - - - - - - - - - - - - - - - -</p>
									<p>今日有效订单：0</p>
									<p>昨日此时段订单：0</p>
									<p>同一时段订单量：+0</p>
								</div>
							</template>

							<template v-if="setInfo.current === 1">
								<div>
									<p>今日有效佣金：¥0</p>
									<p>较昨日增长数：+¥0</p>
									<p>今日有效订单：0</p>
									<p>较昨日增长数：+0</p>
								</div>
							</template>

							<template v-if="setInfo.current === 2">
								<div>
									<p>今日佣金：¥0</p>
									<p>昨日佣金：+¥0</p>
									<p>同比增长：+0</p>
								</div>
							</template>
						</div>
						<p class="remark">
							<span>备注：</span>
							<span>点击查看订单详情</span>
						</p>
					</div>
					<div class="del flex-between">
						<span>详情</span>
						<span>></span>
					</div>
				</div>
			</el-dialog>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			showDia: false,
			btnGroup: ['默认模板一', '默认模板二', '默认模板三'],
			setInfo: {
				id: '',
				checkList: [],
				current: 0,
				isOpen: false
			},
			template: null
		};
	},
	created() {
		this.getSetInfo();
	},
	methods: {
		// 获取用户配置信息
		getSetInfo() {
			this.$service.perf
				.settingInfo()
				.then(res => {
					if (res.time) {
						res.time = res.time.split(',');
						res.time.forEach((el, index) => {
							res.time[index] = Number(res.time[index]);
						});
					} else {
						res.time = [];
					}
					this.setInfo.id = res.id;
					this.setInfo.isOpen = res.isOpen;
					this.setInfo.checkList = res.time;
					this.setInfo.current = res.template;
					this.template = res.template;
				})
				.catch(error => {
					console.log(error);
				});
		},
		save() {
			let params = {};
			params.isOpen = this.setInfo.isOpen;
			params.time = this.setInfo.checkList.join(',');
			params.template = this.setInfo.current;
			params.id = this.setInfo.id;
			this.$service.perf
				.add(params)
				.then(() => {
					this.$message.success('设置成功');
					this.getSetInfo();
				})
				.catch(() => {});
		}
	}
};
</script>

<style lang="stylus" scoped>
.container {
    padding 0 10px
    &>div {
        background-color white
    }
    .left {
        width 400px
        margin-right 10px
        padding 27px 16px
        .switch {
            padding-bottom 10px
            border-bottom 1px solid #D0D0D0
            font-size 15px
            font-weight bold
            align-items center
            .el-switch {
                margin-left 22px
            }
        }
        .tip {
            padding-top 5px
            font-size 14px
            color #878789
            margin-bottom 44px
        }
        .day {
            font-size 15px
            font-weight bold
            margin-bottom 34px
            span {
                color $main-color
            }
        }
        .set {
            border 1px solid #D9D9D9
            border-radius 4px
            .title {
                height 40px
                line-height 40px
                font-size 15px
                padding 0 8px
                background-color #FFF5F2
                border-bottom 1px solid #D9D9D9
            }
            /deep/.el-checkbox-group{
                padding-top 20px
                .el-checkbox {
                    margin-right 0
                    margin-bottom 20px
                    width 25%
                    text-align center
                    .el-checkbox__label {
                        width 3em
                    }
                }
            }
        }
    }
    .right {
        flex 1
        padding 26px 50px
        font-size 15px
        .title {
            font-weight bold
            margin-bottom 40px
        }
        .group {
            margin-bottom 32px
        }
        .tem-btn {
            width 100px
            height 32px
            line-height 32px
            background-color white
            border-radius 4px
            border: 1px solid #D9D9D9
            margin-right 20px
            text-align center
            font-size 14px
            display inline-block
            cursor pointer
        }
        .tem-btn-c {
            background-color $main-color
            border: none
            color white
        }
        .title-res {
            padding-left 16px
        }
        .tem {
            margin-top 5px
            width 583px
            height 250px
            padding 15px 20px
            border-radius 4px
            border 1px solid #D9D9D9
            margin-bottom 40px
            p {
                color #5A575B
                font-size 14px
                line-height 1.5em
            }
        }
        .operation {
            width 583px
            .save {
                background-color $main-color
                color white
                margin-right 47px
            }
            .pre {
                color $main-color
                border 1px solid $main-color
            }
        }
        .operation>div {
            width 106px
            height 30px
            border-radius 17px
            text-align center
            line-height 30px
            font-size 12px
            cursor pointer
        }
        .preDia {
            .content {
                border 1px solid #D9D9D9
                border-radius 4px
                .box {
                    padding 17px
                    // min-height 284px
                }
                .pre-title {
                    font-weight bold
                    font-size 14px
                    color black
                    margin-bottom 10px
                }
                .pre-tip {
                    color #8D8D8D
                    font-size 13px
                    margin-bottom 10px
                }
                .date {
                    font-size 13px
                    color #243264
                    margin-bottom 10px
                    span {
                        color #8D8D8D
                    }
                }
                .res {
                    font-size 13px
                    margin-bottom 17px
                    &>p {
                        color #8D8D8D
                    }
                    div {
                        p {
                            color #243264
                            line-height 1.5em
                        }
                    }
                }
                .remark {
                    font-size 13px
                    &>:nth-child(1) {
                        min-width 5em
                        display inline-block
                    }
                    &>:nth-child(2) {
                        color #CC2700
                    }
                }
                .del {
                    border-top 1px solid #D9D9D9
                    height 38px
                    line-height 38px
                    font-size 14px
                    padding 0 17px
                    :nth-child(2) {
                        font-weight bold
                        color #C9C9CC
                    }
                }
            }
        }
    }
}
.current {
    padding: 10px 0;
    color: $main-color;
}
</style>
